一、基本语法

1

<iframe src="https://example.com" width="600" height="400"></iframe>

常用属性：

二、常见用途

1. 嵌入第三方内容
   如YouTube视频、Google Maps、Twitter帖子等。

2. 跨域加载资源
   加载其他域的页面，尤其用于广告或微前端架构。

3. 沙箱隔离
   使用 sandbox 属性可以限制 iframe 中内容的行为，增强安全性。

三、sandbox 属性详解

sandbox 属性可以开启一个“安全沙箱”环境，防止iframe中的内容执行一些潜在危险的操作。

常见值：

⚠️ 默认情况下，启用 sandbox 会阻止几乎所有功能，只有指定的功能才会被放开。

四、安全性注意

1. 跨域限制

   • 同源策略限制 JavaScript 访问 iframe 中的内容，除非两个页面同源。
   • 可以用 postMessage() 实现跨域通信。

2. 防点击劫持（Clickjacking）

   • 网站可以使用 HTTP 头部 X-Frame-Options: DENY 或 Content-Security-Policy: frame-ancestors 来防止被 iframe 嵌入。

3. 不要轻信 iframe 加载的内容

   • 第三方 iframe 可能包含恶意脚本或尝试进行权限提升。

五、iframe 与现代前端的结合

1. 微前端架构

   • 使用 iframe 将多个独立的应用程序集成在一个壳应用中。

2. 懒加载与性能优化

   • 使用 loading="lazy" 让 iframe 在进入视口时才加载，提升性能。

3. 通信机制：window.postMessage()
   用于 iframe 与父页面之间的安全通信：

   1 2 3 4 5 6 7 8 9

   // 父页面发送消息 iframe.contentWindow.postMessage('hello', 'https://example.com'); // iframe 接收消息 window.addEventListener('message', (event) => { if (event.origin === 'https://parent.com') { console.log('收到消息:', event.data); } });

六、iframe 的替代方案

在某些场景下，iframe 被认为是不优雅或性能差的解决方案，替代方案包括：

• 使用 Web Components + Shadow DOM
• Ajax/Fetch + 动态内容加载
• SPA（单页面应用）路由切换
• 微前端框架（如 Qiankun、Single-SPA）

在实现跨域嵌入时，使用 <iframe> 是一种常见的解决方案，尤其是当你需要嵌入第三方内容或者外部网站时。然而，跨域嵌入也会遇到一些限制，尤其是在与 iframe 内容的交互和控制方面。具体而言，浏览器的同源政策（Same-Origin Policy）会限制你在一个域下操作或访问来自其他域的 iframe 内容，除非跨域资源支持特定的跨域通信协议。

为了克服这些限制，除了使用 <iframe> 之外，还有一些替代方案，你可以根据实际需求来选择合适的方案。

1. 跨域通信：postMessage

如果你控制嵌入的 iframe 页面和父页面，那么可以通过 postMessage 实现跨域通信。这种方式可以让父页面和嵌入的 iframe 页面进行消息传递，而无需违反浏览器的同源政策。

示例：

父页面向 iframe 页面发送消息：

1
2

const iframe = document.getElementById('myIframe');
iframe.contentWindow.postMessage('Hello iframe', 'https://example.com');

iframe 页面接收并处理消息：

1
2
3
4
5
6

window.addEventListener('message', function(event) {
  if (event.origin !== 'https://yourdomain.com') {
    return; // 验证消息来源
  }
  console.log('Received message:', event.data);
});

这种方法适用于父页面与 iframe 页面之间需要相互交换数据的场景。

2. CORS（跨域资源共享）

CORS 是一种允许浏览器向不同源的服务器发出请求并获取响应的机制。通过设置合适的服务器头（Access-Control-Allow-Origin），服务器可以允许特定的源访问它的资源。虽然 CORS 主要用于 AJAX 请求，但它也有助于控制跨域访问权限。

如果你的 iframe 页面能够访问并处理 CORS 请求，那么可以通过 Ajax 来加载数据，而不依赖于传统的 iframe。例如，通过请求 API 获取数据，并动态加载页面内容。

1
2
3
4
5
6
7
8
9

fetch('https://example.com/api/data', {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer token' // 如果需要认证
  }
})
  .then(response => response.json())
  .then(data => console.log(data));

CORS 适用于从服务器端控制跨域请求的场景，尤其是当你希望通过 API 与远程资源交互时。

3. JSONP（JSON with Padding）

JSONP 是一种绕过同源策略限制的技术，通常用于跨域获取数据。它通过在 <script> 标签中嵌入远程 URL 来加载数据，从而绕过浏览器的同源策略。

JSONP 主要用于跨域的数据请求，而不适用于嵌入整个页面或互动内容。由于其安全性问题，JSONP 已逐渐被其他技术（如 CORS）所取代，但它仍然可以在一些特定场景下使用。

示例：

1
2
3
4
5
6

<script src="https://example.com/data?callback=handleResponse"></script>
<script>
  function handleResponse(data) {
    console.log('Received data:', data);
  }
</script>

JSONP 适用于只需要获取数据并不需要复杂交互的场景，且要求目标服务器支持 JSONP。

4. Web Components 和 Shadow DOM

如果你需要将第三方内容嵌入到网页中，但又不想使用传统的 <iframe>，可以考虑使用 Web Components 和 Shadow DOM。Web Components 是一种用于封装和隔离 HTML 元素及其行为的标准，Shadow DOM 可以帮助你将嵌套的元素和样式封装在一个“影子”树中，避免样式和事件的污染。

示例：

1
2
3
4
5
6
7
8
9
10
11
12

<my-widget></my-widget>

<script>
  class MyWidget extends HTMLElement {
    constructor() {
      super();
      const shadow = this.attachShadow({ mode: 'open' });
      shadow.innerHTML = `<iframe src="https://example.com"></iframe>`;
    }
  }
  customElements.define('my-widget', MyWidget);
</script>

Web Components 和 Shadow DOM 适用于希望通过封装来避免样式和脚本冲突的场景，尤其是在复杂的应用中，能够提供更好的代码组织和重用。

5. Server-Side Embedding (代理方式)

另一种方法是使用 服务器端代理，即在你的服务器上中转数据或内容。服务器从第三方网站获取数据或页面，然后将其嵌入到你的网页中。这种方式可以有效绕过浏览器的跨域限制，因为跨域问题仅限于浏览器端，服务器端没有同源策略的限制。

示例：

• 你可以在服务器上使用像 Node.js、PHP、Python 等技术来发起 HTTP 请求，从第三方网站获取数据或页面。
• 然后，将该内容通过你的服务器传递给前端，前端无需使用 <iframe>，而是直接显示或渲染从服务器获取的数据。

这种方法适用于需要嵌入外部资源，但不希望受限于浏览器的跨域策略，同时你控制服务器端代码的场景。

6. Proxy Iframe（代理 iframe）

如果你不能修改第三方页面的内容，但又需要跨域嵌入，你可以创建一个代理 iframe。这种方法涉及通过你自己的服务器创建一个 iframe 页面，页面本身可以从第三方获取内容。

示例：

• 你将第三方页面请求通过服务器代理，服务器再将其发送到客户端。
• 前端 iframe 引用的是你的服务器，而不是直接引用第三方页面。

这种方法避免了直接跨域访问第三方内容，但可能涉及额外的工作和服务器负担。

7. Server-Side Rendering (SSR)

在一些复杂的应用中，可以考虑 服务器端渲染（SSR） 的方式，通过服务器生成 HTML 内容，然后将其直接发送到浏览器，而不通过 iframe。

例如，如果你需要集成外部内容，可以通过服务器从第三方网站抓取并生成静态页面内容，然后在浏览器中直接渲染。这种方式可以避免跨域问题，但需要更多的服务器端处理和缓存。

8. Content Embedding via API

如果第三方提供了 API 接口，而你只需要嵌入其中的部分数据或功能，可以直接使用 API 获取数据并动态渲染到你的页面中，而不是通过 iframe 嵌入完整页面。

例如，第三方提供了一个社交媒体的 API，你可以直接使用该 API 获取用户的数据并在页面上展示，而无需嵌入整个网站或应用。

总结

除了传统的 <iframe> 嵌入方法外，还有多种替代方案来实现跨域嵌入，每种方案都有不同的适用场景：

1. **postMessage**：适用于父页面与 iframe 页面之间的跨域通信。
2. CORS：适用于 API 请求，允许跨域访问资源。
3. JSONP：适用于简单的跨域数据获取，已逐渐被 CORS 替代。
4. Web Components 和 Shadow DOM：适用于需要封装和隔离的内容嵌入。
5. Server-Side Embedding：适用于通过服务器中转跨域内容。
6. Proxy Iframe：通过服务器代理解决跨域问题。
7. Server-Side Rendering：通过服务器渲染并直接传递内容。
8. Content Embedding via API：通过 API 动态嵌入外部内容。

选择哪种方法取决于你的具体需求，控制的权限，跨域安全策略，和所嵌入的内容的特性。